<template>
  <div id="chinaMap" ref="myEchart"></div>
</template>

<script>
import 'echarts-gl';
// import "@/assets/js/china.js";
import "../../node_modules/echarts/map/js/china.js";

let Echarts;
export default {
  props: {
    mapDataList: {
      type: Array,
      default() {
        return [
          {
            value: [117.2159, 37.08609, 1000, 1],
          },
        ];
      },
    },
  },
  name:'chinaMap',
  data() {
    return {
      city: {
        china: "china",
      },
    };
  },
  methods: {
   

    initMap(data) {
      let map = this.$refs.myEchart;
      Echarts = this.$echarts.init(map); // eslint-disable-line no-unused-vars
      // var regionsData = china.features.map(function (feature, index) {
      //   return {
      //     name: feature.properties.name,
      //     value: city[index].value[3],
      //     height: feature.properties.height || 10,
      //     itemStyle: {
      //       areaColor: feature.properties.color,
      //       opacity: 1,
      //       borderWidth: 1,
      //       borderColor: "#4dffe1", //省市边界线
      //     },
      //   };
      // });
      let than = this;
      var option = {
        geo3D: {
          name: "中国",
          map: 'china', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
          regionHeight: 10, //模型的高度
          top: "-5%",
          roam: false,
          // boxDepth: 80,
          boxHeight:10,
          shading: 'lambert',
          selectedMode:'single',
          label: {
            show: false, //是否显示标签。
            position: ["50%", "50%"],
            formatter: (params) => {
              params.name;
            },
            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
            },
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: false,
            },
            ambient: {
              intensity: 0.5
            },
            ambientCubemap: {
              exposure: 1,
              diffuseIntensity: 0.5,
              specularIntensity: 2
            }
          },
          viewControl: {
            // distance: 115,
            rotateSensitivity: 0,
            zoomSensitivity: 0,
            alpha: 65,
            beta: 5,
          },
          itemStyle: {
            //静态模式下显示的默认样式
            borderWidth: 1,
            borderColor: "#95FFFF",
            areaColor: "#3797e8",
            color: '#3797e8',
            emphasis: {
              // 鼠标移上去的样式
              borderWidth: 1,
              borderColor: "#95FFFF",
              areaColor: "#3797e8",
              color: '#3797e8',
              textStyle: {
                // color:'blue'
              },
            },
          },
        },
        series: [
          {
            name: "点",
            type: "scatter3D",
            coordinateSystem: "geo3D",
            symbol: "circle",
            symbolSize: [10, 25],
            label: {
              show: false,
              distance:0,
              // formatter:function(params) {
              //   than.setMapLayerList(params.data)
              // },
              textStyle:{
                color:'transparent',
                borderWidth:0,
                fontSize:0,
              }
            },
            itemStyle: {
              normal: {
                color: "#fff", //标志颜色
                borderWidth:2,
                borderColor:"#99c5f8"
              },
            },
            zlevel: 100,
            data: data,
            animationDurationUpdate: 3000,
          },
        ],
      };
      Echarts.setOption(option);
      window.onresize = Echarts.resize();
    },
  },
  watch:{
    mapDataList:{
      handler:function(val) {
        this.initMap(val);
      },
      deep:true
    }
  },
  beforeDestroy() {
     if (!this.myChart) {
           return;
     }
     this.myChart.dispose();
     this.myChart = null;
 },
};
</script>

<style>
</style>